<template>
  <div class="container">
    <!-- 内容部分 -->
    <el-card :border="false">
      <div class="container_bottom">
        <el-table :data="tableData" :preserve-expanded-content="true" border style="width: 100%">
          <el-table-column label="团队ID" prop="team_id" />
          <el-table-column label="团队名称" prop="team_name" />
          <el-table-column label="团队队长" prop="team_captain_name" />
          <el-table-column label="团队项目" prop="team_project_name" />
          <el-table-column label="团队成员数" prop="team_member_num" />
          <el-table-column label="操作" width="100px">
            <template #default="scope">
              <el-button size="small" type="warning" @click="dismiss(scope.row)">解散</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="width: 100%; align-items: center;justify-content: center;margin-top: 20px;">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30]"
            :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import axios from '../http/index.js'

const currentPage = ref(1)
const pageSize = ref(10)
//记录请求返回数据的集合
const msg = ref([]);
//用于保存当前用户信息
const userInfo = ref()
//用于记录用户所查询的输入信息 inputStr
const inputStr = ref()

//用于暂存当前页的数据
const tableData = ref([])
tableData.value = msg.value
let total = ref(0)

// 获取所有的数据
function getData() {
  axios.get('admin/teams')
    .then(response => {
      if (response.code === 1) {
        // 请求成功的处理
        msg.value = response.teams;
        // 获取数据的总条数
        total.value = Array.isArray(msg.value) ? msg.value.length : 0;
        // 获取当前页的数据
        getPageData();
        console.log("当前页的数据:", tableData.value);
        ElMessage({
          message: '查询数据加载成功',
          type: 'success'
        });
      } else {
        ElMessage({
          message: '查询数据加载失败',
          type: 'error'
        });
      }
    })
    .catch(err => {
      // 请求失败的处理
      ElMessage({
        message: '查询数据加载失败: ' + err.message,
        type: 'error'
      });
      console.error(err);
    });
}

//获取全部数据
function getAllData() {
  console.log('getAllData')
  //清空输入的imputStr
  //请求全部的数据
  getData()
}

//获取当前页的数据
function getPageData() {
  //先把当前页面的数据清空
  tableData.value = []
  //获取当前页面的数据
  for (let i = (currentPage.value - 1) * pageSize.value; i < total.value; i++) {
    //遍历数据添加到tableData中
    tableData.value.push(msg.value[i])
    //判断是否达到一页的要求
    if (tableData.value.length === pageSize.value) break
  }
}

//分页时修改每一页所展示的数据量
const handleSizeChange = (val) => {
  //修改当前每一页的数据条数
  pageSize.value = val
  //数据重新分页
  getPageData()
  console.log(`${val} items per page`)
}

//调整当前页的页码
const handleCurrentChange = (val) => {
  //修改当前页的页码
  currentPage.value = val
  //数据重新分页
  getPageData()
  console.log(`current page: ${val}`)
}

//解散团队
function dismiss(row) {
  console.log("解散团队", row)
  ElMessageBox.confirm('是否解散该团队？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    //发送请求
    axios.delete('admin/deleteTeam', {
      params: {
        team_id: row.team_id,
        project_id: row.team_project_id,
        address: row.team_address
      }
    })
      .then(response => {
        if (response.code === 1) {
          ElMessage({
            message: '解散成功',
            type: 'success'
          });
          getData()
        } else {
          ElMessage({
            message: '解散失败',
            type: 'error'
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消操作'
    });
  });
}


onMounted(() => {

  getData()

})


</script>

<style scoped>
.container {
  width: 100% !important;
}

.items-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.center-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* 使容器占满整个单元格的高度 */
}
</style>


<script>
export default {
  name: 'UserTeamManagement',
};
</script>